<template>
	<view class="door">
		<u-navbar :title="title" leftIcon=" " :leftIconColor="titleColor" :titleStyle ="titleStyle"></u-navbar>
		<view class="tab-area" :style="{'top':`${44+statusHgt}px`}">
			<u-sticky bgColor="#fff">
				<u-tabs style="font-size: 20rpx;" :list="list1" :activeStyle="activeStyle" :lineColor="lineColor" @click="tabSel"></u-tabs>
			</u-sticky>
		</view>
		<view class="u-content" :style="{'margin-top':`${88+statusHgt}px`}">

			<view class="order-list">
				<template v-if="tabnav=='助教'">
					<view class="order-item order-item-teach u-flex" v-for="item in 3">
						<image src="../../static/bill.png" mode=""></image>
						<view class="right-item">
							<view class="teach-name u-flex">
								<view class="order-name u-flex">
									<text>九亿少女的梦</text>
									<image src="../../static/boy.png" mode=""></image>
								</view>
								<text class="playing" v-if="item==1">对局中</text>
								<text class="done" v-else="item==3">已完成</text>
							</view>
							<view class="order-mes">
								<view class="order-mes-left">
									<view class="u-flex">
										<text>下单时间：</text>
										<text>2024-1-8 10:21</text>
									</view>
									<view class="price-btm u-flex">
										<view class="time-play u-flex">
											<text>对局时间：</text>
											<text>50分钟</text>
										</view>
										<view class="price-btm-right" v-show="item==2">
											<text>￥</text>15.6
										</view>
									</view>
								</view>

							</view>
						</view>
					</view>
				</template>
				<template v-else>
					<view class="order-item" :class="{'order-item-done':item==2,'order-item-reserv':item==1}" v-for="item in orderList">
						<view class="order-name u-flex">
							<text>中式台球·{{item.storeRoomName}}</text>
							<text v-if="item.orderStatus==2">对局中</text>
							<text v-else-if="item.orderStatus==1">已预订</text>
							<text v-else-if="item.orderStatus==4">已完成</text>
						</view>
						<view class="order-mes u-flex">
							<view class="order-mes-left">
								<view class="u-flex">
									<text>消费门店：</text>
									<text>{{item.storeName}}</text>
								</view>
								<view class="u-flex">
									<text v-if="item.orderStatus!=1">开台时间：</text>
									<text v-else>预约时间：</text>
									<text>{{item.orderTime}}</text>
								</view>
								<!-- <view class="u-flex" v-show="item.orderStatus==2">
									<text>对局时间：</text>
									<text>50分钟</text>
								</view> -->
								<view class="u-flex" v-show="item.orderStatus==0">
									<text>待 结 算：</text>
									<text>{{item.orderMondey}}元</text>
								</view>
								<view class="u-flex" v-show="item.orderStatus==1">
									<text>预约金额：</text>
									<text>{{item.orderMondey}}元</text>
								</view>
							</view>
							<view class="order-mes-right">
								<view class="over-btn" v-if="item.orderStatus==2" @click="cancelOrder(item.id,item.orderStatus)">
									结束订单
								</view>
								<view class="cancel-btn" v-else-if="item.orderStatus==1" @click="cancelOrder(item.id,item.orderStatus)">
									取消预订
								</view>
								<view class="done-btn" v-else-if="item.orderStatus==4">
									<image src="../../static/done.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
	import { getOrderListByUserId,cancelOrderPay } from '@/api/order';
	export default {
		data() {
			return {
				title:'我的订单',
				titleColor:'#333333',
				titleStyle:{
					color:'#333333'
				},
				activeStyle:{
					color:"#FF7814"
				},
				lineColor:'linear-gradient(90deg, #FF732E 0%, #FFB245 100%)',
				tabnav:'全部',
				list1: [{
					name: '全部',
					id:0
				}, {
					name: '进行中',
					id:2
				}, {
					name: '已预订',
					id:4
				}, {
					name: '已完成',
					id:3
				},
				// {
				// 	name: '助教'
				// },
				],
				statusHgt:0,
				token: uni.getStorageSync("token"), // token
				orderList: [], // 订单列表
			}
		},
		computed: mapGetters(['location','userInfo']),
		onShow() {
			console.log("latitude:"+this.location.latitude)
			console.log("longitude:"+this.location.longitude)
			this.setNavStart(0); // 默认选择全部
		},
		onLoad(option) {
			this.statusHgt=getApp().globalData.statusBarHeight;
		},
		methods:{
			setNavStart(start) { // 设置导航栏状态

				this.navStart = start

				this.getOrderList(start) // 获取订单列表
			},
			// 获取订单列表
			getOrderList(start) {

				let that = this
				let param = {
					startFlag:start
				}
				getOrderListByUserId(param).then(res => {
					that.orderList = res.data
				})
			},
			//取消订单
			cancelOrder(orderId,orderStatus){
				let ordertype=orderStatus===1?2:1;
				let param = {
					orderId:orderId,
					orderType:ordertype
				}
				cancelOrderPay(param).then(res => {
					if (res.status === 200) {
						uni.showToast({
						  title: res.data,
						  //icon: 'success',
						  icon: 'none',
						  duration: 5000,
						})
						this.setNavStart(0);
					}else{
						uni.showToast({
						  title: res.data,
						  //icon: 'success',
						  icon: 'none',
						  duration: 5000,
						})
						this.setNavStart(0);
					}
				})
			},
			tabSel(item){
				this.tabnav=item.name;
				this.setNavStart(item.id); // 默认选择全部
				console.log(item,'item')
			}
		}
	}
</script>
<style>
	page{
		background-color: #EDEDED;
	}
</style>
<style lang="scss">

	.flex-item{
		display: flex;
		align-items: center;
	}
	.tab-area{
		position: fixed;
		left:0;
		width: 100vw;
		z-index: 99;
	}
	.u-content{
		font-size: 34rpx;
		color: $u-main-color;
		line-height: 1.8;
		white-space: pre-wrap !important;
		.order-list{
			padding: 20rpx 28rpx;

			.order-item{
				width: 685rpx;
				background: #FFFFFF;
				border-radius: 8rpx;
				margin-bottom: 20rpx;
				padding: 20rpx 26rpx;
				box-sizing: border-box;
				.order-name{
					padding-bottom: 20rpx;
					border-bottom: 1rpx solid #CCCCCC;
					justify-content: space-between;
					>text{
						&:nth-child(1){
							font-size: 32rpx;
							font-weight: bold;
							color: #333333;
						}
						&:nth-child(2){
							font-size: 26rpx;
							color: #FF7814;
						}
					}
				}
				.order-mes{
					padding-top: 20rpx;
					justify-content: space-between;
					.order-mes-left{
						>view,.time-play{
							margin-bottom: 10rpx;
							>text{
								&:nth-child(1){
									// width: 130rpx;
									font-size: 26rpx;
									font-weight: 500;
									color: #777777;
									text-align: justify;
									text-align-last: justify;
									/*兼容ie*/
									text-justify: distribute-all-lines;
								}
								&:nth-child(2){
									font-size: 26rpx;
									font-weight: 500;
									color: #333333;
								}
							}
						}
					}
					.order-mes-right{
						.over-btn{
							width: 152rpx;
							height: 70rpx;
							line-height: 70rpx;
							background: #FF752F;
							border-radius: 8rpx;
							font-size: 30rpx;
							color: #FFFFFF;
							text-align: center;
						}
						.cancel-btn{
							width: 152rpx;
							height: 70rpx;
							line-height: 72rpx;
							background: transparent;
							border: 1rpx solid #FF752F;
							border-radius: 8rpx;
							font-size: 30rpx;
							color: #FF752F;
							text-align: center;
						}
						.done-btn{
							image{
								width: 136rpx;
								height: 136rpx;
							}
						}
					}
				}
			}
			.order-item-reserv{
				.order-name{
					>text{
						&:nth-child(2){
							font-size: 26rpx;
							color: #0EA632;
						}
					}
				}
			}
			.order-item-done{
				color: #999999;
				.order-name{
					>text{
						&:nth-child(1){
							color: #999999;
						}
						&:nth-child(2){
							font-size: 26rpx;
							color: #999999;
						}
					}
				}
				.order-mes{
					.order-mes-left{
						>view{
							>text{
								&:nth-child(1){
									color: #999999;
								}
								&:nth-child(2){
									color: #999999;
								}
							}
						}
					}
				}
			}
			.order-item-teach{
				>image{
					width: 123rpx;
					height: 123rpx;
					margin-right: 16rpx;
				}
				.right-item{
					flex: 1;
					.order-mes{
						padding-top: 10rpx;
						.price-btm{
							justify-content: space-between;
							margin-bottom: 0;
							.time-play{
								// margin-bottom: 0;
							}
							.price-btm-right{
								font-size: 36rpx;
								color: #333333;
								>text{
									font-size: 24rpx;
									margin-right: 0rpx;
								}
							}
						}
					}
					.teach-name{
						justify-content: space-between;
						.order-name{
							padding: 0;
							border: none;
							justify-content: flex-start;
							text{
								font-size: 30rpx;
								color: #333333;
								margin-right: 10rpx;
							}
							image{
								width: 24rpx;
								height: 22rpx;
							}
						}
						.playing{
							font-size: 26rpx;
							color: #FF7814;
						}
						.done{
							font-size: 26rpx;
							color: #999999;
						}
					}
				}
			}
		}
	}
	/deep/ .u-tabs__wrapper__nav__item{
	    flex: 1 1 0% !important;
		justify-content: center;
	}
	/deep/ .u-sticky{
		// top:64px!important;
	}
</style>

